<template>
  <div>
    <div class="baseform">
      <el-form :label-position="labelPosition" label-width="80px" :model="from">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="立案机构" prop="organName">
              <tree-select ref="treeSelect" @change="changeParent" @click.stop/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构编码" prop="organId">
              <el-input v-model="from.organId" placeholder="机构编码" :readonly="edit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="立案地点" prop="fillingPlace">
              <el-input v-model="from.fillingPlace" placeholder="立案地点" :readonly="edit">></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="案发时间" prop="caseCauseTime">
              <el-date-picker
                v-model="from.caseCauseTime"
                type="date"
                value-format="timestamp"
                placeholder="选择日期"
                style="width:100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="案件状态" prop="casestatus">
              <el-input v-model="from.casestatus" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行类型" prop="caseTypeId">
              <el-select v-model="from.caseTypeId" placeholder="执行类型" style="width: 100%">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <!-- <el-radio-group v-model="from.type">
                        <el-radio v-for="item in typeList" :key="item.id" :label="item.id">{{item.name}}</el-radio>
              </el-radio-group>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="案件来源" prop="registerSource">
              <el-select v-model="from.registerSource" placeholder="案件来源" style="width: 100%">
                <el-option
                  v-for="item in fromList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执法门类" prop="zfml">
              <el-select
                v-model="from.zfml"
                placeholder="登记系统"
                style="width: 100%"
                @change="changeZfml"
              >
                <el-option
                  v-for="item in zftypelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="案件种类" prop="caseType">
              <el-select v-model="from.caseType" placeholder="案件种类" style="width: 100%">
                <el-option
                  v-for="item in casetypelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div @click="showDetail(typelist.t3)">
              <el-form-item label="执法人员" prop="illegalTypeCode">
                <el-input class="text-overflow" v-model="from.staffstr" placeholder="请选择执法人员">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <break-info ref="breakInfo" @submit="getbreakdata"/>
      </el-form>
    </div>
  </div>
</template>
<script>
  import dictCache from "@/assets/utils/cache-dict-util";
  import FormBtns from "@/views/comps/zhzf/form-btns";
  import caseApi from "@/api/system/case";
  import lawuserApi from "@/api/system/lawuser";
  import deptApi from "@/api/system/dept";
  import TreeSelect from "../../comps/zhzf/tree-select";
  import breakInfo from "./break-info";
  import {mapActions} from "vuex";

  export default {
    components: {FormBtns, TreeSelect, breakInfo},
    props: {
      edit: {
        required: true,
        default: false
      }
    },
    data() {
      return {
        labelPosition: "right",
        typelist: {
          t3: "3"
        },
        typeList: [],
        systemList: [],
        fromList: [],
        treeList: [],
        zftypelist: [],
        casetypelist: [],
        from: {}
      };
    },
    methods: {
      ...mapActions("d2admin/page", ["close"]),
      async initPage(detail, distData) {
        this.from = detail;
        this.from.staffstr = this.stafflistTostr(detail.statffs);
        this.typeList = distData.typeList;
        this.systemList = distData.systemList;
        this.fromList = distData.fromList;
        this.treeList = distData.treeList;
        this.zftypelist = distData.zftypelist;
        this.casetypelist = distData.casetypelist;
        this.$refs.treeSelect.initPage(this.treeList);
        if (this.from.organId) {
          let dept = {id: this.from.organId, name: this.from.organName};
          this.$refs.treeSelect.setValue(dept);
          this.changeParent(dept);
        }
        // this.setDefaultData();
        if (this.from.zfml) {
          this.changeZfml();
        }
      },
      changeZfml() {
        let zfml = dictCache.getDataInfo("0055", this.from.zfml);
        this.from.zfmlName = zfml.name;
        this.$emit("changezfml");
      },
      showDetail(type) {
        this.$refs.breakInfo.initPage(type, this.from);
        //  this.staffList()
      },
      async getbreakdata(data) {
        if (!data) {
          utils.showTips("请选择数据");
          return;
        } else {
          let stafflist = data;
          this.from.statffs = [];
          for (var i = 0; i < stafflist.length; i++) {
            let obj = {};
            let item = stafflist[i];
            obj.username = item.username;
            obj.userId = item.id;
            obj.realName = item.realname;
            obj.cardNo = item.orgCode || "12";
            obj.caseId = item.enabled || "34";
            obj.caseStaffId = item.operateType || "56";
            this.from.statffs.push(obj);
          }
          this.from.staffstr = this.stafflistTostr();
          this.$forceUpdate();
        }
      },
      stafflistTostr() {
        let userText = [];
        if (this.from.statffs) {
          this.from.statffs.forEach(item => {
            userText.push(item.username);
          });
        }
        return userText.join(",");
      },
      async staffList() {
        let res1 = await lawuserApi.stafflist();
      },
      setDefaultData() {
        // if (!this.from.caseTypeId) {
        //   this.from.caseTypeId = Object.values(this.typeList)[0].id;
        // }
        if (!this.from.zfml) {
          this.from.zfml = Object.values(this.zftypelist)[0].id;
        }
        // if (!this.from.casestatus) {
        //   this.from.casestatus = "未立案";
        // }
        // if(!this.from.caseType){
        //   this.from.caseType = Object.values(this.casetypelist)[0].id;
        // }
      },
      async changeParent(item) {
        this.from.fillingPlace = item.address;
        this.from.organId = item.id;
        this.from.organName = item.name;
        if (!item.address) {
          let res = await deptApi.info({id: this.from.organId});
          this.from.fillingPlace = res.data.address;
        }
        this.$forceUpdate();
      }
    }
  };
</script>
<style lang="scss">
  .baseform {
    padding: 0px 20%;
  }

  .el-date-editor {
    .el-input__suffix {
      display: none;
    }
  }
</style>
